<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';

import RepoCompEditDialog from './components/RepoCompEditDialog.vue';
import RepoCompEntityTable from './components/RepoCompEntityTable.vue';
import RepoCompFormHeader from './components/RepoCompFormHeader.vue';

import {CreateRepoCompRequestVO, RepoCompQueryParam} from "@/api/repo/comp/local/types";
import {ElMessage} from "element-plus";
import {updateConfFile} from "@/api/repo/comp/local/app-service";

const repoCompEditDialogRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repoCompEntityTableRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repoCompFormHeaderRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const dataState = reactive({
  // 查询参数
  queryParams: {modelType: 'decoder', pageNum: 1, pageSize: 10} as RepoCompQueryParam,
  // 对话框状态
  editDialog: {
    visible: false,
  },
});


/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  dataState.queryParams = value;
  repoCompEntityTableRef.value.refreshTable(dataState.queryParams);
}

function handleCancel() {
  // 隐藏对话框
  dataState.editDialog.visible = false;
}

function handleUpdate(value: any) {
  let formData = {
    id: value.id,
    compRepo: value.compRepo,
    compType: value.compType,
    compParam: value.compParam,
  } as CreateRepoCompRequestVO;

  updateConfFile(formData).then(() => {
    ElMessage.success('更新成功');
    // 隐藏对话框
    dataState.editDialog.visible = false;
    // 刷新表单
    repoCompEntityTableRef.value.refreshTable(dataState.queryParams);
  })
}

/**
 * 响应查询按钮：页查询数据
 */
function handleUpdateDialog(row: any) {
  dataState.editDialog.visible = true;
  repoCompEditDialogRef.value.initEditData('update', row);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});
</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <repo-comp-form-header ref="repoCompFormHeaderRef"
                           @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <repo-comp-entity-table ref="repoCompEntityTableRef"
                            @update="handleUpdateDialog"
    />

    <!-- 数据表单：创建/修改 -->
    <repo-comp-edit-dialog ref="repoCompEditDialogRef" v-model:visible="dataState.editDialog.visible"
                           @cancel="handleCancel"
                           @update="handleUpdate"
    />

  </div>
</template>
